<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ELAT - Lufthansa Tecknik</title>
    	
    	<link href="css/themes/humanity/jquery-ui-1.8.1.custom.css" media="screen" type="text/css" rel="stylesheet" />
        <link href="css/ui.jqgrid.css" media="screen" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
		<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
		<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <!--[if ie 6]>
    	<link href="css/bugs/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <script  type="text/javascript" language="javascript">
	//<![CDATA[
	
    function customeEditRow(gridid,popupheight,id){ 				
				jQuery("#"+gridid).setSelection('"'+id+'"');
				setTimeout(function(){
				var gr = jQuery("#"+gridid).jqGrid('getGridParam','selrow'); 
				if( gr != null ) 
					jQuery("#"+gridid).jqGrid('editGridRow',gr,{height:popupheight,reloadAfterSubmit:false}); 
				else 
					alert("Please Select Row");
				
				 var winH = $(window).height();  
         var winW = $(window).width();  
                 
         //Set the popup window to center  
		 $('.jqmOverlay').css("opacity","0.5");
        $('#editmod'+gridid).css('top',  winH/2-$('#editmod'+gridid).height()/2).css('height','172px');
         $('#editmod'+gridid).css('left', winW/2-$('#editmod'+gridid).width()/2);  
				
				//if(!$('#divDummyEditPVT').length) //inserting only once
				//		$('#editcntgridPVT').eq(0).html('<div id="divDummyEditPVT" class="divDummyEditPVT">'+$('#editcntgridPVT').eq(0).html()+'</div>');
				
				},100);
		 
		
	}
	function charOrdD(a, b)
	{
		 a = a["name2"].toLowerCase(); b = b["name2"].toLowerCase();
		 if (a<b) return 1;
		 if (a >b) return -1;
		 method = null;
		 return 0;
	} 
	var jqgrid;
	
	function pickdates(id){
				jQuery("#"+id+"_sdate","#gridPVT").datepicker({dateFormat:"yy-mm-dd"}); 
			} 
    var lastsel3;
    var mydata3=[
				{id:"12345",name:"Lorum Ipsum",desc:"Lorum Ipsum",trigger:"Lorum Ipsum",lastexec:"Lorum Ipsum", lastlog:"Lorum Ipsum"},
				{id:"23456Ω",name:"Lorum Ipsum",desc:"Lorum Ipsum",trigger:"Lorum Ipsum",lastexec:"Lorum Ipsum", lastlog:"Lorum Ipsum"},
				{id:"34568Ω",name:"Lorum Ipsum",desc:"Lorum Ipsum",trigger:"Lorum Ipsum",lastexec:"Lorum Ipsum", lastlog:"Lorum Ipsum"},
				{id:"12349Ω",name:"Lorum Ipsum",desc:"Lorum Ipsum",trigger:"Lorum Ipsum",lastexec:"Lorum Ipsum", lastlog:"Lorum Ipsum"},
				{id:"23450Ω",name:"Lorum Ipsum",desc:"Lorum Ipsum",trigger:"Lorum Ipsum",lastexec:"Lorum Ipsum", lastlog:"Lorum Ipsum"},
				{id:"34561Ω",name:"Lorum Ipsum",desc:"Lorum Ipsum",trigger:"Lorum Ipsum",lastexec:"Lorum Ipsum", lastlog:"Lorum Ipsum"},
				{id:"45678Ω",name:"Lorum Ipsum",desc:"Lorum Ipsum",trigger:"Lorum Ipsum",lastexec:"Lorum Ipsum", lastlog:"Lorum Ipsum"}  		
			];
		$('document').ready(function(){
			jqgrid= jQuery("#gridPVT").jqGrid({
				datatype: "local",
				height: 113,
				colNames:['Name','Description','Trigger','Last Executed','Last Log Message','Delete','Edit','Details'],
				colModel:[
					
					{name:'name',index:'name',formoptions:{ rowpos:1, label: "Name", elmprefix:"(*)"},width:100, editable:true},
					{name:'desc',index:'desc',width:160},
					
					{name:'trigger',index:'trigger', width:120, editable: true},
					{name:'lastexec',index:'lastexec', width:120, editable: true},
					{name:'lastlog',index:'lastlog', width:120, editable: true},
					{name:'deleteCol',index:'deleteCol', width:50, editable: false, align:'center'},
					{name:'edit',index:'edit', width:50, editable: false, align:'center'},
					{name:'details',index:'details', width:50, editable: false, align:'center'}
				],
				onSelectRow: function(id){			
					
					}
				,
				editurl: "server.php",
				altRows:true,
				rowList:[10,20,30],
				autowidth: true,
				cellsubmit:'clientArray',
				cellEdit: true, 
				pager: '#pagerPVT',
				gridComplete: function(){ 
					var ids = jQuery("#gridPVT").jqGrid('getDataIDs'); 
					for(var i=0;i < ids.length;i++){ 
						var cl = ids[i]; 
						bd = "<img src=\"css/images/delete.jpg\" onclick=\"//customeEditRow();\" />";
						be = "<img src=\"css/images/edit.png\" onclick=\"customeEditRow('gridPVT',280,'"+cl+"');return false;\" />";  
						bs = "<img src=\"css/images/details.jpg\" onclick=\"//customeEditRow();\" />";  

						jQuery("#gridPVT").jqGrid('setRowData',ids[i],{deleteCol:bd});
						jQuery("#gridPVT").jqGrid('setRowData',ids[i],{edit:be}); 
						jQuery("#gridPVT").jqGrid('setRowData',ids[i],{details:bs}); 
					} 
					
					if(!$('#recFound').length) //inserting only once
						$('#pagerPVT td').eq(0).after( '<td id="recFound">'+mydata3.length+' records found</td>');
					//$('#gridPVT tr:nth-child(even)').addClass("ui-jqgrid-secondaryrowcolor");

				}, 
				caption: "Existing Rule Chains"
			});
			
			
			for(var i=0;i < mydata3.length;i++)
				jQuery("#gridPVT").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
			
			//jQuery("#gridPVT").jqGrid('navGrid',"#pagerPVT",{edit:true,add:true,del:true});
			jQuery("#gridPVT").jqGrid('navGrid','#pagerPVT',
				{edit:false,add:false,del:false},
				{view:true}, //options 
				{height:290,reloadAfterSubmit:false, jqModal:true, closeOnEscape:true, bottominfo:"Fields marked with (*) are required"}, // edit options 
				{height:290,reloadAfterSubmit:false,jqModal:true, closeOnEscape:true,bottominfo:"Fields marked with (*) are required", closeAfterAdd: true}, // add options 
				{reloadAfterSubmit:false,jqModal:true, closeOnEscape:true}, // del options 
				{closeOnEscape:true,multipleSearch:true}, // search options 
				{height:250,jqModal:true,closeOnEscape:true} // view options 
			); 
			$('#pagerPVT .ui-pg-selbox').before('Rows per page: '); 
			
			
			//secion (search rules)
					jQuery("#searchRules").jqGrid(
					{ 
						datatype: "local", 
						colNames: ['id','Name1'], 
						width:315,
						height:93,
						colModel: [{ name: 'name', index: 'name', width: 100 },{ name: 'id', index: 'id'}],
						caption: 'Search Grid', pager: '#pageSearchRules' 
					});
					
					
					jQuery("#selectedRules").jqGrid(
					{ 
						datatype: "local",
						colNames: ['id','Name2'], 
						width:315,
						height:93,
						sortorder: "desc", 
						colModel: [{ name: 'name', index: 'name', width: 100 ,sorttype:'text'},{ name: 'id', index: 'id' }], 
						caption: 'Selected Grid', pager: '#pageSelectedRules' ,
						onRightClickRow:function(rowid,iRow,iCol,e)
							{
								//alert(rowid + " " + iRow + " " + iCol + " " + e);
								
								$('#menu').css({"top":e.pageY,"left":e.pageX}).attr("tag",rowid).show();
								
								//jQuery("#selectedRules").delRowData(rowid);
							}						
					}); 
					
					
					//Pravat: here in both dataobject , "id" must be unique column and necessary 
					// It is use for making unique data after drag and drop in selectedRules grid
					// There is bug if you make grids as sortableRows and connectWith other grid. 
					//so jQuery("#selectedRules").bind('sortstop', function(event, ui) {  line is done it binds sortstop event and I'd remove all data in selectedRules  which are 
					//included in searchRules data.
					var searchRuleDatas = 	[ 	{name:"one",id:"1"}, 
										  		{name:"two",id:"2"}, 
										  		{name:"three",id:"3"}];
					var selectedRuleDatas = [ 	{name:"four",id:"4"}, 
												{name:"five",id:"5"}, 
												{name:"six",id:"6"}]; 
					
					for (var i = 0; i <= searchRuleDatas.length; i++) 
					{ 
						jQuery("#searchRules").jqGrid('addRowData',i + 1, searchRuleDatas[i]);				 
					} 
					
					for (var i = 0; i <= selectedRuleDatas.length; i++) 
					{ 
						jQuery("#selectedRules").jqGrid('addRowData',i + 1, selectedRuleDatas[i]);				 
					} 
					jQuery("#selectedRules").jqGrid('hideCol',["id"]);
					jQuery("#searchRules").jqGrid('gridDnD',{connectWith:'#selectedRules'		
					}).jqGrid('hideCol',["id"]);
					//jQuery("#selectedRules").jqGrid('gridDnD',{connectWith:'#searchRules'}).jqGrid('hideCol',["id"]);
					$('#gbox_searchRules .ui-jqgrid-titlebar').hide();
					$('#gbox_searchRules .ui-jqgrid-hbox').hide();
					$('#gbox_selectedRules .ui-jqgrid-titlebar').hide();
					$('#gbox_selectedRules .ui-jqgrid-hbox').hide();
					$('#searchRules').css('width','').css('margin-top','0px');
					$('#selectedRules').css('width','').css('margin-top','0px');
					$('#selectedRules').jqGrid('sortableRows');
					jQuery("#selectedRules").bind('sortstop', function(event, ui) { 
						var dataSelectedRules=$('#selectedRules').getRowData ();
						var dataSearchedRules=$('#searchRules').getRowData ();
						
						var uniqueData=unique(dataSelectedRules,dataSearchedRules);
						
						//delRowData	rowid
						
						//$('#gridmain').jqGrid('getDataIDs');
						
							$('#selectedRules').clearGridData();
							for(var i=0;i<uniqueData.length;i++)
							{
								
								jQuery("#selectedRules").addRowData(i+1,uniqueData[i]);
							}


					});

			//end section (search Rules)
			
			
			//start section (rule change values)
			
			jQuery("#ruleChainKeyValues").jqGrid(
					{ 
						datatype: "local", 
						colNames: ['Key','is','Value','Delete'], 
						width:660,
						height:78,
						cellEdit: true,
						//altRows:true,
						colModel: [{ name: 'key', index: 'key', editable: true},{ name: 'is', index: 'is',width:20},{ name: 'value', index: 'value', editable: true},
						
						{name:'deleteCol',index:'deleteCol', width:30, editable: false, align:'center'}//,
					//{name:'newCol',index:'newCol', width:10, editable: false, align:'center'}
						],
						caption: 'Rule Chain Key/Values', pager: '#pageSearchRules' ,						
						
						 formatCell: function (id, cellname, value, iRow, iCol) {
						 
						 //$("#"+(rowid-1)+"_"+cellname).val($(value).text());
						 }
						, 
						
						gridComplete: function(){ 
					var ids = jQuery("#ruleChainKeyValues").jqGrid('getDataIDs'); 
					for(var i=0;i < ids.length;i++){ 
						var cl = ids[i];						
						bd = "<img src=\"css/images/delete.jpg\" onclick=\"//customeEditRow();\" /><img src=\"css/images/edit.png\" onclick=\"customeEditRow('ruleChainKeyValues',50,'"+cl+"');return false;\" />"; 						
						jQuery("#ruleChainKeyValues").jqGrid('setRowData',ids[i],{deleteCol:bd});
						
						$("#ruleChainKeyValues td[aria-describedby='ruleChainKeyValues_key']").addClass('ruleChainKeytd');
						$("#ruleChainKeyValues td[aria-describedby='ruleChainKeyValues_value']").addClass('ruleChainValuetd');
					} 
					
					if(!$('#recFound').length) //inserting only once
						$('#pagerPVT td').eq(0).after( '<td id="recFound">'+mydata3.length+' records found</td>');
					//$('#gridPVT tr:nth-child(even)').addClass("ui-jqgrid-secondaryrowcolor");
					$('#ruleChainKeyValues').attr('cellspacing',10);
				}
					});
			var ruleChainKeyValuesData = 	[ 	{key:"key",is:"is..",value:"value"}, 
										  		{key:"key",is:"is..",value:"value"}, 
										  		{key:"key",is:"is..",value:"value"}];
										  		
			for (var i = 0; i <= ruleChainKeyValuesData.length; i++) 
					{ 
						jQuery("#ruleChainKeyValues").jqGrid('addRowData',i + 1, ruleChainKeyValuesData[i]);				 
					} 
					$('#gbox_ruleChainKeyValues .ui-jqgrid-hbox').hide();
			//end section														 
			
			});
			
			function addNewRule(){ jQuery("#ruleChainKeyValues").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); }
			
			function unique(arrayName,notinarray)
            {
                var newArray=new Array();
				
                label:for(var i=0; i<arrayName.length;i++ )
                {  
                    for(var j=0; j<notinarray.length;j++ )
                    {						
                        if(notinarray[j].id==arrayName[i].id) 
                            continue label;
                    }
					if(arrayName[i].id)
                    newArray[newArray.length] = arrayName[i];
                }
                return newArray;
            }
			$(document).not('#menu').mousedown(function(){$('#menu').hide();});
		//]]>
		
		function deleteRowDataAndAdd(rowid)
		{
			var data= $('#selectedRules').getRowData (rowid);
			jQuery("#searchRules").addRowData(rowid,data);
			jQuery('#selectedRules').delRowData(rowid);
			$('#menu').hide();
		}
	</script>
</head>
<body>
<!--MAIN WRAPPER-->

<div id="menu" class="btnGrey" onclick="deleteRowDataAndAdd($(this).attr('tag'));" style="position:absolute;z-index:10;background-color:red;cursor:pointer;display:none;"> <span> delete</span></div>
	<div class="wrapper">
    	<ul class="topBar">
        	<li><a href="#" class="arrPrev">Previous</a></li>
            <li><a href="#" class="arrNext">Next</a></li>
            <li><a href="#" class="question">Help</a></li>
            <li class="right"><img src="css/images/logoLufthansa.jpg" alt="Lufthansa Technik" /></li>
        </ul>
        <div class="header">
        	<h1 class="heading">A380 Cabin SLA Tool -  Lufthansa Technik</h1>
        </div>
        <div class="mainMenu">
        
          <div class="menu">

<ul>
<li class="leftBg"><a href="#">Performance<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">Performance 1</a></li>
	<li><a href="#">Performance 2</a></li>
	<li><a href="#">Performance 3</a></li>
	<li><a href="#">Performance 4</a></li>

	<li><a class="drop" href="#">Performance 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Performance Sub 1</a></li>
			<li><a href="#">Performance Sub 2</a></li>
			<li><a href="#">Performance Sub 3</a></li>
		</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="drop" href="#">Performance 6<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Performance Sub 1</a></li>
			<li><a href="#">Performance Sub 2</a></li>
			<li><a href="#">Performance Sub 3</a></li>

		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="drop" href="#">Performance 7<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Performance Sub 1</a></li>
			<li><a href="#">Performance Sub 2</a></li>
			<li><a href="#">Performance Sub 3</a></li>
		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#">Performance 8</a></li>
	<li><a href="#">Performance 9</a></li>
	<li><a href="#">Performance 10</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--><div class="separator"></div>
</li>
<li><a href="#">Segment<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">Segment 1</a></li>
	<li><a href="#">Segment 2</a></li>
	<li><a href="#">Segment 3</a></li>
	<li><a href="#">Segment 4</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--><div class="separator"></div>
</li>
<li><a href="#">Rules<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">Rules 1</a></li>
	<li><a href="#">Rules 2</a></li>
	<li><a href="#">Rules 3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--><div class="separator"></div>
</li>
<li><a href="#">Limits</a><div class="separator"></div></li>

<li><a href="#">Alerts<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">Alerts 1</a></li>
	<li><a href="#">Alerts 2</a></li>
	<li><a href="#">Alerts 3</a></li>
	<li><a href="#">Alerts 4</a></li>

	<li><a class="drop" href="#">Alerts 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Alerts Sub 1</a></li>
			<li><a href="#">Alerts Sub 2</a></li>
			<li><a href="#">Alerts Sub 3</a></li>
		</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="drop" href="#">Alerts 6<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Alerts Sub 1</a></li>
			<li><a href="#">Alerts Sub 2</a></li>
			<li><a href="#">Alerts Sub 3</a></li>

		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    <div class="separator"></div></li>
    
    <li><a href="#">Data<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
	<li><a href="#">Data 1</a></li>
	<li><a href="#">Data 2</a></li>
	<li><a href="#">Data 3</a></li>
	<li><a href="#">Data 4</a></li>

	<li><a class="drop" href="#">Data 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Data Sub 1</a></li>
			<li><a href="#">Data Sub 2</a></li>
			<li><a href="#">Data Sub 3</a></li>
		</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--><div class="separator"></div>
</li>

<li><a href="#">Configuration<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
	<li><a href="#">Configuration 1</a></li>
	<li><a href="#">Configuration 2</a></li>
	<li><a class="drop" href="#">Configuration 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Configuration Sub 1</a></li>
			<li><a href="#">Configuration Sub 2</a></li>
			<li><a href="#">Configuration Sub 3</a></li>
		</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#">Configuration 4</a></li>
	<li><a href="#">Configuration 5</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--><div class="separator"></div>
</li>

<li><a href="#">Users<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
	<li><a href="#">Users 1</a></li>
	<li><a href="#">Users 2</a></li>
	<li><a class="drop" href="#">Users 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Users Sub 1</a></li>
			<li><a href="#">Users Sub 2</a></li>
			<li><a href="#">Users Sub 3</a></li>
		</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#">Users 4</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--><div class="separator"></div>
</li>

</ul>

</div>

        </div>
        <div class="content">
        <div class="title">
        	
            &gt; Rules &gt; Create Rule Chain
        </div>
        <div class="contentIn">
        	<div class="contentTitleOrange">
            	Create Rule Chain
            </div>
            <div class="boxGrey">
            	<div class="boxGreyTop">
                </div>
                <div class="boxGreyDesc">
                	<div class="chainRule">
                        <ul class="chainRuleLeft">
                            <li>Enter Rule Chain Name<br /><input type="text" /></li>
                            <li>Defination<br /><textarea rows="" cols=""></textarea></li>
                            <li>Trigger<br /><select class="trigger"></select></li>
                        </ul>
                        <ul class="chainRuleMid">
                        	<li>
                                Search Rules
                                <table  id="searchRules"></table>
                                <div id="pagerSearchRules"></div>
                            </li>
                            <li>
                                <a href="#" class="arrNext">Next</a>
                            </li>
                            <li>
                                Selected Rules
                                <table id="selectedRules"></table>
                                <div id="pagerSelectedRules"></div>
                            </li>
                            <li>
                                <table id="ruleChainKeyValues">
                                	
                                </table>
                            </li>
							<li class="widthF">
                        	<a href="#" class="btnGrey right">Submit</a>
                            <a href="#" class="btnGrey right">Clear</a></li>
                        </ul>
                        
                    </div>
                    <!--<a href="#" class="btnGrey right">Search</a>
                    <a href="#" class="btnGrey">Clear</a>-->
                </div>
                <div class="boxGreyBot">
                </div>
            </div>            
            <table  id="gridPVT" class="content"></table>
            <div id="pagerPVT"></div>
            <select>
            	<option>Export As</option>
            </select>
            </div>
        </div>
        
    </div>
</body>
</html>
